<template>
	<view class="pageBox">
		<view class="pageTop">
			<input v-model="keyWord" placeholder="请输入您想要搜索的内容" placeholder-class="topInputP" class="topInput" />
			<view class="search" @click="search">搜索</view>
		</view>
		<view class="page">
			<view class="leftBox">
				<view class="itemClass" v-for="item,index in list" :key="item.value" @click="clickItem(item)">
					<image class="itemImage" :src="item.image"></image>
					<div :class="activeValue==item.value ? 'activeColor' : ''"
						:style="{color:activeValue!==item.value ?'black':item.activeColor}">{{item.name}}</div>
				</view>
			</view>
			<scroll-view class="listBox" scroll-y @scrolltolower="lower">
				<busList :listData="listData" v-if="isBus" @reload="init" />
				<jhList :listData="listData" v-if="isJh" @reload="init" />
				<cgList :listData="listData" v-if="isCg" @reload="init" />
				<ypList :listData="listData" v-if="isYp" @reload="init" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getDocBus,
		getInfo
	} from "@/api/byfz.js"
	import busList from "@/components/busList"
	import jhList from "@/components/jhList"
	import cgList from "@/components/cgList"
	import ypList from "@/components/ypList"
	import {
		saveData
	} from "../../utils/file"
	export default {
		components: {
			busList,
			cgList,
			ypList,
			jhList
		},
		computed: {
			isBus() {
				return this.activeValue == 'shengchan'
			},
			isYp() {
				return this.activeValue == 'yangpin'
			},
			isCg() {
				return this.activeValue == 'caigou'
			},
			isJh() {
				return this.activeValue == 'jiaohuo'
			}
		},
		onLoad: async function(query) {
			this.getInfoFunc()
			// 监听自定义事件
			uni.$on('refreshIndex', () => {
				// 在这里执行onLoad逻辑
				this.getInfoFunc()
				saveData()
			})
			saveData()
		},
		data() {
			return {
				keyWord: '',
				list: [],
				list2: [{
						name: '生产记录',
						value: 'shengchan',
						image: require("@/static/hc.png"),
						list: [],
						activeColor: 'rgba(0,151,216)'
					},
					{
						name: '交货记录',
						value: 'jiaohuo',
						image: require("@/static/jh.png"),
						list: [],
						activeColor: 'rgba(243,167,49)'
					},
					{
						name: '采购记录',
						value: 'caigou',
						image: require("@/static/cg.png"),
						list: [],
						activeColor: 'rgba(251,154,85)'
					}, {
						name: '样品记录',
						value: 'yangpin',
						image: require("@/static/yp.png"),
						list: [],
						activeColor: 'rgba(73,179,112)'
					}
				],
				activeValue: '',
				listData: [],
				pageNum: 1,
				pageSize: 10,
				isFinish: false,
				isAdmin: false
			};
		},
		methods: {
			search() {
				this.initParams();
				this.initData();
			},
			lower() {
				if (!this.isFinish) {
					this.pageNum++
					this.initData()
				}
			},
			async getInfoFunc() {
				this.list = []
				const res = await getInfo();
				if (res.roles && res.roles.find(i => i == 'admin')) {
					this.isAdmin = true;
					this.list = this.list2
					this.init()
					return
				}
				for (let item of res.roles) {
					if (this.list2.find(i => i.value == item) && !this.list.find(i => i.value == item)) {
						this.list.push(this.list2.find(i => i.value == item))
					}
				}
				this.init()
			},
			init() {
				if (this.list.length == 0) {
					return;
				}
				if (this.activeValue == '') {
					this.clickItem(this.list[0])
				} else {
					this.clickItem(this.list.find(i => i.value == this.activeValue))
				}
			},
			initParams() {
				this.isFinish = false;
				this.pageNum = 1;
				this.listData = []
			},
			async initData() {
				let keyWord = ''
				if (this.isBus) {
					keyWord = 'shengchan'
				} else if (this.isJh) {
					keyWord = 'jiaohuo'
				} else if (this.isCg) {
					keyWord = 'caigou'
				} else if (this.isYp) {
					keyWord = 'yangpin'
				}
				const res = await getDocBus({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					tableName: keyWord,
					key1: this.keyWord
				})
				this.listData = [...this.listData, ...res.rows]
				for (let item of this.listData) {
					item.isAdmin = this.isAdmin
				}
				if (res.total <= this.pageNum * this.pageSize) {
					this.isFinish = true;
				}
			},
			async clickItem(item) {
				this.activeValue = item.value;
				this.initParams()
				this.initData()
				this.keyWord = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: 100%;
		background-color: #fff;
	}

	.page {
		display: flex;
		height: calc(100% - 107rpx);
		background-color: #fff;
	}

	.pageBox {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* #endif */

	/* #ifdef APP */
	page {
		height: 100vh;
		background-color: #fff;
	}

	.page {
		display: flex;
		height: calc(100vh - 107rpx);
		background-color: #fff;
	}

	.pageBox {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* #endif */




	.leftBox {
		height: 98%;
		margin-top: 1%;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}


	.itemImage {
		width: 80rpx;
		height: 80rpx;
	}

	.itemClass {
		text-align: center;
		margin-left: 5rpx;
		margin-right: 5rpx;
		margin-top: 20rpx;
		font-size: 20rpx;
	}

	.activeColor {
		color: #1296db;
	}

	.listBox {
		padding-left: 35rpx;
		padding-right: 20rpx;
		flex: 1;
		border-left: 1rpx rgb(244, 243, 244) solid;
		padding-bottom: 20rpx;
		overflow-y: auto;
	}

	.pageTop {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		background-color: #fff;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 10rpx;

		.topInput {
			width: 528rpx;
			height: 67rpx;
			font-size: 27rpx;
			font-family: Adobe Heiti Std;
			color: #393939;
			line-height: 40rpx;
			background: rgb(247, 247, 247);
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			opacity: 1;
			border: 1rpx solid #D2D2D2;
			text-align: center;
		}

		.topInputP {
			color: rgb(180, 180, 180);
		}

		.search {
			width: 120rpx;
			height: 67rpx;
			font-size: 27rpx;
			font-family: Adobe Heiti Std;
			line-height: 32rpx;
			background-color: #4aac94;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
		}
	}
</style>